<template>
  <div>路由传递参数的页面</div>
  <hr />
  <div>
    <input type="text" placeholder="路径参数" v-model="info" />
    <input type="text" placeholder="查询字符串参数1" v-model="query.id" />
    <input type="text" placeholder="查询字符串参数2" v-model="query.name" />
    <button @click="toParamPage">带参数的路由跳转</button>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()

import { ref } from 'vue'

function toParamPage() {
  //  路径的配置： '/study/routerparam/:info',
  // :info表示这个地方是一个变量，用户可以传递数据的部分
  // 传递路径参数
  let config = {
    // 要跳转的路径
    path: `/study/routerparam/${info.value}`,
    // 要通过查询字符串传递的参数
    query: query.value,
  }
  router.push(config)
}

const info = ref('DarkKnight')
const query = ref({
  id: 1,
  name: '黑暗骑士',
})
</script>

<style lang="scss" scoped></style>
